import React from 'react';
import ReactDOM from 'react-dom';
import _ from 'lodash';

import { PageHeader } from '../components/page-header';
import { Content, PageTitle } from '../components/content';
import { PageFooter } from '../components/page-footer';
import { Book } from './components/books.api';

import * as Sys from '../sys';
import * as SysApi from '../sys.api';

import * as BooksApi from './components/books.api';
import * as SysBom from '../sys.bom';
import { Form, FormFields } from '../components/forms';
import { TextBox, NumberBox, DateBox } from '../components/text-box';
import { SaveButton } from '../components/buttons';
import { DropdownBox } from '../components/dropdown-box';
import { CheckBox } from '../components/check-box';

BooksApi.register();

const bookId = SysBom.parseSearch()['book-id'] || 0;

interface IApp {
    data: Book,
}

export class App extends React.Component<{}, IApp> {
    private categoryRef: React.RefObject<DropdownBox>;
    private priceRef: React.RefObject<NumberBox>;
    private amountRef: React.RefObject<NumberBox>;
    private titleRef: React.RefObject<TextBox>;
    private authorRef: React.RefObject<TextBox>;
    private pubDateRef: React.RefObject<DateBox>;
    private starRef: React.RefObject<CheckBox>;

    constructor(props: {}) {
        super(props);

        this.state = {
            data: null,
        };

        this.categoryRef = React.createRef();
        this.priceRef = React.createRef();
        this.amountRef = React.createRef();
        this.titleRef = React.createRef();
        this.authorRef = React.createRef();
        this.pubDateRef = React.createRef();
        this.starRef = React.createRef();
    }

    componentDidMount = () => {
        SysApi.call('books.queryById', bookId).then(data => this.setState({ data }));
    };

    private handleSaveClick = () => {
        SysApi.call('books.save', {
            bookId,
            category: this.categoryRef.current.getValue(),
            title: this.titleRef.current.getValue(),
            author: this.authorRef.current.getValue(),
            price: this.priceRef.current.getNumberValue(),
            amount: this.amountRef.current.getNumberValue(),
            'pub-date': this.pubDateRef.current.getDateValue(),
            star: this.starRef.current.isChecked(),
        }, true)
            .then(data => {
                SysBom.jumpTo('detail?book-id=' + bookId);
            });
    };

    render(): JSX.Element {
        const { data } = this.state;
        return <>
            <PageHeader current={20} />
            <Content>
                <PageTitle>Book: {bookId}</PageTitle>
                {!data ?
                    <div className="ui placeholder">
                        <div className="line" />
                        <div className="line" />
                        <div className="line" />
                        <div className="short line" />
                        <div className="short line" />
                    </div>
                    : <>
                        <Form>
                            <FormFields>
                                <DropdownBox className="six wide field" labelText='类别：' options={BooksApi.BookCategoryOptions} value={data.category} ref={this.categoryRef} />
                                <NumberBox className="six wide field" labelText='价格：' numberValue={data.price} fractionDigits={2} ref={this.priceRef} />
                                <NumberBox className="four wide field" labelText='数量：' numberValue={data.amount} fractionDigits={0} ref={this.amountRef} />
                            </FormFields>
                            <FormFields>
                                <TextBox className="twelve wide field" labelText='标题：' defaultValue={data.title} maxLength={40} ref={this.titleRef} />
                                <TextBox className="four wide field" labelText='作者：' defaultValue={data.author} maxLength={40} ref={this.authorRef} />
                            </FormFields>
                            <FormFields>
                                <DateBox className="six wide field" labelText='出版日期：' dateValue={data.pubDate} ref={this.pubDateRef} />
                                <CheckBox labelText='推荐：' defaultChecked={data.star} ref={this.starRef} />
                            </FormFields>
                        </Form>
                        <SaveButton onClick={this.handleSaveClick} className="ui primary button" />
                    </>
                }
            </Content>
            <PageFooter />
        </>
    }
};

if (bookId > 0) {
    Sys.ready(() => ReactDOM.render(<App />, document.getElementById('root')!));
}